:root {
     --cream: #f7f4ef;
     --charcoal: #1c1c1e;
     --taupe: #b5a99a;
     --accent: #c0392b;
     --card-radius: 14px;
     --map-bg: #e8e3da;
 }

 *,
 *::before,
 *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }

 body {
     background: var(--cream);
     font-family: 'DM Sans', sans-serif;
     color: var(--charcoal);
     min-height: 100vh;
     overflow: hidden;
 }

 /* ── Filter bar ─────────────────────────── */
 .filter-bar {
     background: #fff;
     border-bottom: 1px solid #e5e0d8;
     padding: 10px 20px;
     display: flex;
     align-items: center;
     gap: 10px;
     position: relative;
     z-index: 20;
 }

 .filter-bar span {
     font-size: 13px;
     font-weight: 500;
     color: var(--taupe);
     letter-spacing: .04em;
     text-transform: uppercase;
 }

 .filter-btn {
     display: flex;
     align-items: center;
     gap: 6px;
     background: var(--charcoal);
     color: #fff;
     border: none;
     border-radius: 20px;
     padding: 5px 14px;
     font-size: 13px;
     font-family: 'DM Sans', sans-serif;
     cursor: pointer;
     transition: background .2s;
 }

 .filter-btn:hover {
     background: #333;
 }

 /* drop-a-pin top bar badge */
 .pin-badge {
     margin-left: auto;
     display: flex;
     align-items: center;
     gap: 7px;
     background: var(--cream);
     border: 1.5px solid #e5e0d8;
     border-radius: 20px;
     padding: 5px 14px;
     font-size: 12.5px;
     font-weight: 500;
     color: var(--charcoal);
     cursor: default;
 }

 .pin-badge i {
     color: var(--accent);
     font-size: 14px;
 }

 .pin-badge .pin-addr {
     max-width: 160px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }

 .pin-badge {
     display: none;
 }

 .pin-badge.visible {
     display: flex;
 }

 /* ── Layout ──────────────────────────────── */
 .search-layout {
     display: grid;
     grid-template-columns: 320px 1fr;
     height: calc(100vh - 49px);
     overflow: hidden;
 }

 /* ── Card list ───────────────────────────── */
 .card-list {
     overflow-y: auto;
     padding: 16px 14px;
     background: var(--cream);
     scrollbar-width: thin;
     scrollbar-color: var(--taupe) transparent;
 }

 /* result count */
 .list-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 14px;
     padding: 0 2px;
 }

 .list-count {
     font-size: 12px;
     color: var(--taupe);
     letter-spacing: .04em;
     text-transform: uppercase;
     font-weight: 500;
 }

 .sort-btn {
     display: flex;
     align-items: center;
     gap: 5px;
     font-size: 12px;
     color: var(--charcoal);
     background: none;
     border: none;
     cursor: pointer;
     font-family: 'DM Sans', sans-serif;
     font-weight: 500;
 }

 /* Hotel card */
 .hotel-card {
     background: #fff;
     border-radius: var(--card-radius);
     overflow: hidden;
     margin-bottom: 16px;
     box-shadow: 0 2px 12px rgba(0, 0, 0, .07);
     transition: transform .2s, box-shadow .2s, border-color .2s;
     cursor: pointer;
     border: 2px solid transparent;
 }

 .hotel-card:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
 }

 .hotel-card.active {
     border-color: var(--accent);
     box-shadow: 0 4px 20px rgba(192, 57, 43, .18);
 }

 /* Image carousel */
 .card-carousel {
     position: relative;
     height: 190px;
     background: #ddd;
     overflow: hidden;
 }

 .card-carousel img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
 }

 .carousel-btn {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     background: rgba(255, 255, 255, .85);
     border: none;
     border-radius: 50%;
     width: 30px;
     height: 30px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 14px;
     color: var(--charcoal);
     cursor: pointer;
     transition: background .2s;
     z-index: 2;
 }

 .carousel-btn:hover {
     background: #fff;
 }

 .carousel-btn.prev {
     left: 10px;
 }

 .carousel-btn.next {
     right: 10px;
 }

 .wishlist-btn {
     position: absolute;
     top: 10px;
     right: 10px;
     background: rgba(255, 255, 255, .85);
     border: none;
     border-radius: 50%;
     width: 32px;
     height: 32px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 16px;
     color: var(--accent);
     cursor: pointer;
     z-index: 2;
     transition: background .2s;
 }

 .wishlist-btn:hover {
     background: #fff;
 }

 /* near-pin badge on card */
 .near-pin-tag {
     position: absolute;
     top: 10px;
     left: 10px;
     background: var(--accent);
     color: #fff;
     font-size: 10px;
     font-weight: 600;
     letter-spacing: .05em;
     text-transform: uppercase;
     border-radius: 20px;
     padding: 3px 9px;
     z-index: 2;
     display: none;
 }

 .near-pin-tag.visible {
     display: block;
 }

 /* Card body */
 .card-body-inner {
     padding: 14px 16px 16px;
 }

 .card-tag {
     font-size: 10px;
     font-weight: 500;
     letter-spacing: .1em;
     text-transform: uppercase;
     color: var(--taupe);
     margin-bottom: 4px;
 }

 .card-title {
     font-family: 'Cormorant Garamond', serif;
     font-size: 20px;
     font-weight: 700;
     color: var(--charcoal);
     margin-bottom: 4px;
     line-height: 1.2;
 }

 .card-desc {
     font-size: 12.5px;
     color: #888;
     margin-bottom: 12px;
     line-height: 1.5;
 }

 .card-footer-row {
     display: flex;
     align-items: center;
     justify-content: space-between;
 }

 .price-tag {
     font-size: 13px;
     color: var(--charcoal);
     font-weight: 500;
 }

 .score-badge {
     display: flex;
     align-items: center;
     gap: 6px;
 }

 .score-label {
     font-size: 11px;
     color: #888;
     text-align: right;
     line-height: 1.3;
 }

 .score-num {
     background: #1a6e3c;
     color: #fff;
     font-size: 13px;
     font-weight: 700;
     border-radius: 6px 6px 6px 0;
     padding: 4px 8px;
 }

 /* dist tag below footer */
 .card-dist {
     font-size: 11px;
     color: var(--accent);
     font-weight: 500;
     margin-top: 8px;
     display: none;
 }

 .card-dist.visible {
     display: block;
 }

 /* ── Map panel ───────────────────────────── */
 .map-panel {
     position: relative;
     background: var(--map-bg);
     overflow: hidden;
 }

 .map-canvas {
     width: 100%;
     height: 100%;
     position: relative;
     background: #e9e4d9;
     cursor: crosshair;
     user-select: none;
 }

 .map-canvas::before {
     content: '';
     position: absolute;
     inset: 0;
     background:
         repeating-linear-gradient(0deg, transparent, transparent 59px, rgba(255, 255, 255, .55) 60px),
         repeating-linear-gradient(90deg, transparent, transparent 79px, rgba(255, 255, 255, .55) 80px);
     pointer-events: none;
 }

 .lake {
     position: absolute;
     right: 0;
     top: 0;
     bottom: 0;
     width: 22%;
     background: linear-gradient(135deg, #a8d4e8 0%, #78b8d8 100%);
     clip-path: polygon(20% 0%, 100% 0%, 100% 100%, 10% 100%, 0% 60%);
     pointer-events: none;
 }

 .river {
     position: absolute;
     top: 38%;
     left: 10%;
     right: 30%;
     height: 14px;
     background: rgba(120, 184, 216, .6);
     border-radius: 8px;
     transform: rotate(-2deg);
     pointer-events: none;
 }

 .river::after {
     content: '';
     position: absolute;
     top: 20px;
     left: -5%;
     right: -5%;
     height: 10px;
     background: rgba(120, 184, 216, .45);
     border-radius: 8px;
     transform: rotate(1.5deg);
 }

 .park {
     position: absolute;
     background: rgba(120, 185, 100, .35);
     border-radius: 4px;
     pointer-events: none;
 }

 /* Ambient price pins */
 .amb-pin {
     position: absolute;
     background: #1e3a5f;
     color: #fff;
     font-size: 11px;
     font-weight: 700;
     font-family: 'DM Sans', sans-serif;
     border-radius: 4px;
     padding: 3px 7px;
     white-space: nowrap;
     box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
     pointer-events: none;
     opacity: .65;
 }

 .amb-pin::after {
     content: '';
     position: absolute;
     bottom: -5px;
     left: 50%;
     transform: translateX(-50%);
     border-left: 5px solid transparent;
     border-right: 5px solid transparent;
     border-top: 5px solid #1e3a5f;
 }

 /* Interactive hotel pins */
 .pin {
     position: absolute;
     background: #1e3a5f;
     color: #fff;
     font-size: 11px;
     font-weight: 700;
     font-family: 'DM Sans', sans-serif;
     border-radius: 4px;
     padding: 3px 7px;
     cursor: pointer;
     transition: transform .15s, background .15s;
     white-space: nowrap;
     box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
     z-index: 5;
 }

 .pin::after {
     content: '';
     position: absolute;
     bottom: -5px;
     left: 50%;
     transform: translateX(-50%);
     border-left: 5px solid transparent;
     border-right: 5px solid transparent;
     border-top: 5px solid #1e3a5f;
 }

 .pin:hover,
 .pin.active {
     background: var(--accent);
     transform: scale(1.1) translateY(-2px);
 }

 .pin:hover::after,
 .pin.active::after {
     border-top-color: var(--accent);
 }

 /* Dropped pin (custom SVG) */
 .dropped-pin {
     position: absolute;
     width: 36px;
     height: 44px;
     transform: translate(-50%, -100%);
     pointer-events: none;
     display: none;
     z-index: 10;
     animation: pinDrop .35s cubic-bezier(.22, .61, .36, 1);
 }

 .dropped-pin.visible {
     display: block;
 }

 @keyframes pinDrop {
     0% {
         transform: translate(-50%, -160%);
         opacity: 0;
     }

     60% {
         transform: translate(-50%, -92%);
     }

     80% {
         transform: translate(-50%, -104%);
     }

     100% {
         transform: translate(-50%, -100%);
         opacity: 1;
     }
 }

 .pin-shadow {
     position: absolute;
     bottom: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 14px;
     height: 6px;
     background: rgba(0, 0, 0, .2);
     border-radius: 50%;
 }

 .pin-ripple {
     position: absolute;
     width: 60px;
     height: 60px;
     border-radius: 50%;
     border: 2px solid var(--accent);
     transform: translate(-50%, -50%) scale(0);
     animation: ripple .6s ease-out forwards;
     pointer-events: none;
     z-index: 9;
 }

 @keyframes ripple {
     to {
         transform: translate(-50%, -50%) scale(2);
         opacity: 0;
     }
 }

 /* Radius circle */
 .radius-circle {
     position: absolute;
     border-radius: 50%;
     border: 2px dashed rgba(192, 57, 43, .5);
     background: rgba(192, 57, 43, .06);
     transform: translate(-50%, -50%);
     pointer-events: none;
     display: none;
     z-index: 4;
 }

 .radius-circle.visible {
     display: block;
 }

 /* Map tooltip */
 .map-tooltip {
     position: absolute;
     background: #fff;
     border-radius: 10px;
     box-shadow: 0 4px 20px rgba(0, 0, 0, .18);
     padding: 10px 14px;
     width: 180px;
     z-index: 20;
     font-size: 12px;
     display: none;
     pointer-events: none;
 }

 .map-tooltip.visible {
     display: block;
 }

 .map-tooltip .tt-name {
     font-family: 'Cormorant Garamond', serif;
     font-size: 15px;
     font-weight: 700;
     margin-bottom: 2px;
 }

 .map-tooltip .tt-score {
     color: #1a6e3c;
     font-weight: 700;
 }

 /* Map search bar */
 .map-search-bar {
     position: absolute;
     top: 12px;
     left: 50%;
     transform: translateX(-50%);
     width: min(300px, 76%);
     background: #fff;
     border-radius: 24px;
     box-shadow: 0 2px 12px rgba(0, 0, 0, .15);
     display: flex;
     align-items: center;
     gap: 8px;
     padding: 9px 16px;
     z-index: 10;
     font-size: 13px;
     color: var(--charcoal);
     cursor: pointer;
 }

 .map-search-bar i {
     font-size: 15px;
     color: var(--taupe);
 }

 .map-search-bar span {
     color: #aaa;
 }

 .map-search-bar .pin-indicator {
     margin-left: auto;
     background: var(--accent);
     color: #fff;
     font-size: 10px;
     font-weight: 600;
     border-radius: 20px;
     padding: 2px 8px;
     display: none;
     white-space: nowrap;
 }

 .map-search-bar .pin-indicator.visible {
     display: block;
 }

 /* Instruction overlay */
 .instruction-banner {
     position: absolute;
     top: 64px;
     left: 50%;
     transform: translateX(-50%);
     z-index: 15;
     background: rgba(28, 28, 30, .82);
     backdrop-filter: blur(6px);
     color: #fff;
     border-radius: 24px;
     padding: 9px 18px;
     display: flex;
     align-items: center;
     gap: 9px;
     font-size: 13px;
     font-weight: 400;
     white-space: nowrap;
     pointer-events: none;
     transition: opacity .3s, transform .3s;
 }

 .instruction-banner.hide {
     opacity: 0;
     transform: translateX(-50%) translateY(-8px);
 }

 .instruction-banner i {
     color: var(--accent);
     animation: bob 1.6s ease-in-out infinite;
 }

 @keyframes bob {

     0%,
     100% {
         transform: translateY(0)
     }

     50% {
         transform: translateY(-4px)
     }
 }

 /* Zoom controls */
 .zoom-controls {
     position: absolute;
     bottom: 24px;
     right: 14px;
     display: flex;
     flex-direction: column;
     gap: 2px;
     z-index: 10;
 }

 .zoom-btn {
     width: 32px;
     height: 32px;
     background: #fff;
     border: none;
     border-radius: 4px;
     font-size: 18px;
     font-weight: 300;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
     cursor: pointer;
     color: var(--charcoal);
     transition: background .15s;
 }

 .zoom-btn:hover {
     background: #f5f5f5;
 }

 /* Scale bar */
 .scale-bar {
     position: absolute;
     bottom: 28px;
     left: 14px;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     gap: 2px;
     z-index: 10;
     pointer-events: none;
 }

 .scale-line {
     width: 64px;
     height: 3px;
     background: var(--charcoal);
     border-left: 3px solid var(--charcoal);
     border-right: 3px solid var(--charcoal);
 }

 .scale-text {
     font-size: 10px;
     color: var(--charcoal);
     font-weight: 500;
 }

 /* ── Result bottom card (pin info) ──────── */
 .result-card {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     background: #fff;
     border-radius: 20px 20px 0 0;
     box-shadow: 0 -6px 30px rgba(0, 0, 0, .12);
     padding: 16px 18px 20px;
     z-index: 30;
     transform: translateY(100%);
     transition: transform .4s cubic-bezier(.4, 0, .2, 1);
 }

 .result-card.visible {
     transform: translateY(0);
 }

 .drag-handle {
     width: 36px;
     height: 4px;
     background: #ddd;
     border-radius: 4px;
     margin: 0 auto 14px;
 }

 .rc-location {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     gap: 12px;
     margin-bottom: 12px;
 }

 .rc-pin-icon {
     width: 36px;
     height: 36px;
     background: var(--accent);
     border-radius: 50% 50% 50% 4px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     font-size: 15px;
     flex-shrink: 0;
 }

 .rc-info {
     flex: 1;
 }

 .rc-label {
     font-size: 10px;
     font-weight: 600;
     letter-spacing: .08em;
     text-transform: uppercase;
     color: var(--taupe);
     margin-bottom: 2px;
 }

 .rc-address {
     font-family: 'Cormorant Garamond', serif;
     font-size: 18px;
     font-weight: 700;
     line-height: 1.2;
     margin-bottom: 3px;
 }

 .rc-coords {
     font-size: 11px;
     color: var(--taupe);
 }

 .rc-close {
     background: var(--cream);
     border: none;
     border-radius: 50%;
     width: 30px;
     height: 30px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 13px;
     color: var(--charcoal);
     cursor: pointer;
     flex-shrink: 0;
 }

 .rc-close:hover {
     background: #ede8df;
 }

 .rc-radius-row {
     display: flex;
     align-items: center;
     gap: 6px;
     flex-wrap: wrap;
     margin-bottom: 12px;
 }

 .rc-radius-label {
     font-size: 11.5px;
     color: var(--taupe);
     flex-shrink: 0;
 }

 .radius-chip {
     border: 1.5px solid #e5e0d8;
     border-radius: 20px;
     padding: 4px 12px;
     font-size: 12px;
     font-family: 'DM Sans', sans-serif;
     cursor: pointer;
     background: #fff;
     white-space: nowrap;
     transition: all .15s;
     user-select: none;
 }

 .radius-chip.active {
     background: var(--charcoal);
     color: #fff;
     border-color: var(--charcoal);
 }

 .radius-chip:hover:not(.active) {
     border-color: var(--charcoal);
 }

 .rc-search-btn {
     width: 100%;
     background: var(--charcoal);
     color: #fff;
     border: none;
     border-radius: 12px;
     padding: 12px;
     font-size: 13.5px;
     font-weight: 500;
     font-family: 'DM Sans', sans-serif;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 7px;
     transition: background .2s;
 }

 .rc-search-btn:hover {
     background: #333;
 }

 .spinner {
     width: 16px;
     height: 16px;
     border: 2px solid rgba(255, 255, 255, .35);
     border-top-color: #fff;
     border-radius: 50%;
     animation: spin .7s linear infinite;
     display: none;
 }

 @keyframes spin {
     to {
         transform: rotate(360deg);
     }
 }

 /* ── Mobile tab bar ──────────────────────── */
 .mobile-tabs {
     display: none;
     position: fixed;
     bottom: 0;
     left: 0;
     right: 0;
     z-index: 50;
     background: #fff;
     border-top: 1px solid #e5e0d8;
     padding: 8px 16px 14px;
     gap: 10px;
 }

 .tab-btn {
     flex: 1;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 7px;
     padding: 10px;
     border-radius: 12px;
     border: none;
     font-family: 'DM Sans', sans-serif;
     font-size: 13px;
     font-weight: 500;
     cursor: pointer;
     transition: background .2s, color .2s;
     background: var(--cream);
     color: var(--taupe);
 }

 .tab-btn.active {
     background: var(--charcoal);
     color: #fff;
 }

 .tab-btn i {
     font-size: 16px;
 }

 /* ── Filter drawer ───────────────────────── */
 .filter-overlay {
     position: fixed;
     inset: 0;
     background: rgba(28, 28, 30, .45);
     backdrop-filter: blur(3px);
     z-index: 100;
     opacity: 0;
     pointer-events: none;
     transition: opacity .3s;
 }

 .filter-overlay.open {
     opacity: 1;
     pointer-events: all;
 }

 .filter-drawer {
     position: fixed;
     top: 0;
     right: 0;
     bottom: 0;
     width: 380px;
     max-width: 95vw;
     background: #fff;
     z-index: 101;
     display: flex;
     flex-direction: column;
     transform: translateX(100%);
     transition: transform .35s cubic-bezier(.4, 0, .2, 1);
     box-shadow: -8px 0 40px rgba(0, 0, 0, .15);
 }

 .filter-drawer.open {
     transform: translateX(0);
 }

 .drawer-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 20px 24px 18px;
     border-bottom: 1px solid #f0ebe3;
 }

 .drawer-title {
     font-family: 'Cormorant Garamond', serif;
     font-size: 22px;
     font-weight: 700;
 }

 .drawer-close {
     background: var(--cream);
     border: none;
     border-radius: 50%;
     width: 34px;
     height: 34px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 16px;
     cursor: pointer;
     transition: background .2s;
 }

 .drawer-close:hover {
     background: #ede8df;
 }

 .drawer-body {
     flex: 1;
     overflow-y: auto;
     padding: 24px;
     scrollbar-width: thin;
     scrollbar-color: var(--taupe) transparent;
 }

 .filter-section {
     margin-bottom: 28px;
 }

 .filter-section-title {
     font-size: 11px;
     font-weight: 600;
     letter-spacing: .1em;
     text-transform: uppercase;
     color: var(--taupe);
     margin-bottom: 14px;
 }

 .star-chips {
     display: flex;
     gap: 8px;
     flex-wrap: wrap;
 }

 .star-chip {
     display: flex;
     align-items: center;
     gap: 4px;
     border: 1.5px solid #e5e0d8;
     border-radius: 20px;
     padding: 5px 14px;
     font-size: 13px;
     font-family: 'DM Sans', sans-serif;
     cursor: pointer;
     background: #fff;
     transition: all .15s;
     user-select: none;
 }

 .star-chip.selected {
     background: var(--charcoal);
     color: #fff;
     border-color: var(--charcoal);
 }

 .star-chip:hover:not(.selected) {
     border-color: var(--charcoal);
 }

 .price-range-row {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 12px;
 }

 .price-display {
     font-size: 14px;
     font-weight: 500;
 }

 .price-display span {
     color: var(--taupe);
     font-size: 12px;
     font-weight: 400;
 }

 .range-track {
     position: relative;
     height: 4px;
     background: #e5e0d8;
     border-radius: 4px;
     margin: 10px 0 6px;
 }

 .range-fill {
     position: absolute;
     height: 100%;
     background: var(--charcoal);
     border-radius: 4px;
     pointer-events: none;
 }

 input[type="range"] {
     -webkit-appearance: none;
     appearance: none;
     width: 100%;
     height: 4px;
     background: transparent;
     outline: none;
     cursor: pointer;
     position: absolute;
     top: 0;
     left: 0;
     pointer-events: none;
 }

 input[type="range"]::-webkit-slider-thumb {
     -webkit-appearance: none;
     width: 18px;
     height: 18px;
     border-radius: 50%;
     background: var(--charcoal);
     border: 2.5px solid #fff;
     box-shadow: 0 1px 6px rgba(0, 0, 0, .25);
     cursor: pointer;
     pointer-events: all;
     margin-top: -7px;
 }

 input[type="range"].range-max {
     z-index: 1;
 }

 .range-labels {
     display: flex;
     justify-content: space-between;
     font-size: 11px;
     color: var(--taupe);
     margin-top: 8px;
 }

 .score-btns {
     display: flex;
     gap: 8px;
     flex-wrap: wrap;
 }

 .score-btn {
     border: 1.5px solid #e5e0d8;
     border-radius: 20px;
     padding: 5px 14px;
     font-size: 13px;
     font-family: 'DM Sans', sans-serif;
     cursor: pointer;
     background: #fff;
     transition: all .15s;
     user-select: none;
 }

 .score-btn.selected {
     background: var(--charcoal);
     color: #fff;
     border-color: var(--charcoal);
 }

 .score-btn:hover:not(.selected) {
     border-color: var(--charcoal);
 }

 .prop-list {
     display: flex;
     flex-direction: column;
     gap: 10px;
 }

 .prop-item {
     display: flex;
     align-items: center;
     gap: 12px;
     cursor: pointer;
     user-select: none;
     padding: 10px 14px;
     border: 1.5px solid #f0ebe3;
     border-radius: 10px;
     transition: all .15s;
 }

 .prop-item:hover {
     border-color: var(--taupe);
 }

 .prop-item.selected {
     border-color: var(--charcoal);
     background: var(--cream);
 }

 .prop-check {
     width: 20px;
     height: 20px;
     border-radius: 4px;
     border: 2px solid #d0c8be;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     font-size: 11px;
     color: #fff;
     transition: all .15s;
 }

 .prop-item.selected .prop-check {
     background: var(--charcoal);
     border-color: var(--charcoal);
 }

 .prop-icon {
     font-size: 18px;
     width: 22px;
     text-align: center;
     color: var(--taupe);
 }

 .prop-item.selected .prop-icon {
     color: var(--charcoal);
 }

 .prop-label {
     font-size: 14px;
     font-weight: 400;
     flex: 1;
 }

 .prop-count {
     font-size: 12px;
     color: var(--taupe);
 }

 .amenity-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 8px;
 }

 .amenity-chip {
     display: flex;
     align-items: center;
     gap: 7px;
     border: 1.5px solid #e5e0d8;
     border-radius: 8px;
     padding: 8px 12px;
     font-size: 13px;
     font-family: 'DM Sans', sans-serif;
     cursor: pointer;
     background: #fff;
     transition: all .15s;
     user-select: none;
 }

 .amenity-chip i {
     font-size: 14px;
     color: var(--taupe);
 }

 .amenity-chip.selected {
     background: var(--cream);
     border-color: var(--charcoal);
 }

 .amenity-chip.selected i {
     color: var(--charcoal);
 }

 .amenity-chip:hover:not(.selected) {
     border-color: var(--taupe);
 }

 .drawer-footer {
     padding: 16px 24px;
     border-top: 1px solid #f0ebe3;
     display: flex;
     gap: 10px;
 }

 .btn-reset {
     flex: 1;
     background: var(--cream);
     border: none;
     border-radius: 20px;
     padding: 11px;
     font-size: 13px;
     font-weight: 500;
     font-family: 'DM Sans', sans-serif;
     cursor: pointer;
     transition: background .2s;
 }

 .btn-reset:hover {
     background: #ede8df;
 }

 .btn-apply {
     flex: 2;
     background: var(--charcoal);
     border: none;
     border-radius: 20px;
     padding: 11px;
     font-size: 13px;
     font-weight: 500;
     font-family: 'DM Sans', sans-serif;
     color: #fff;
     cursor: pointer;
     transition: background .2s;
 }

 .btn-apply:hover {
     background: #333;
 }

 /* ── Responsive ──────────────────────────── */
 @media (max-width: 768px) {
     body {
         overflow: hidden;
     }

     .filter-bar {
         overflow-x: auto;
         overflow-y: hidden;
         flex-wrap: nowrap;
         padding: 8px 14px;
         scrollbar-width: none;
     }

     .filter-bar::-webkit-scrollbar {
         display: none;
     }

     .filter-bar span {
         white-space: nowrap;
         flex-shrink: 0;
     }

     .filter-btn {
         flex-shrink: 0;
         white-space: nowrap;
     }

     .pin-badge {
         flex-shrink: 0;
     }

     .search-layout {
         display: block;
         height: calc(100dvh - 49px - 62px);
         position: relative;
         overflow: hidden;
     }

     .card-list {
         position: absolute;
         inset: 0;
         max-height: none;
         padding: 12px 12px 16px;
         overflow-y: auto;
         -webkit-overflow-scrolling: touch;
         transition: opacity .25s, transform .25s;
         z-index: 1;
     }

     .card-list.hidden {
         opacity: 0;
         pointer-events: none;
         transform: translateX(-16px);
     }

     .hotel-card {
         display: flex;
         flex-direction: row;
         height: 118px;
         margin-bottom: 10px;
     }

     .card-carousel {
         width: 118px;
         min-width: 118px;
         height: 100%;
         flex-shrink: 0;
         border-radius: 0;
     }

     .carousel-btn {
         display: none;
     }

     .wishlist-btn {
         width: 28px;
         height: 28px;
         font-size: 13px;
         top: 7px;
         right: 7px;
     }

     .card-body-inner {
         padding: 10px 12px;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
         flex: 1;
         min-width: 0;
         overflow: hidden;
     }

     .card-title {
         font-size: 16px;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
     }

     .card-desc {
         display: none;
     }

     .card-tag {
         margin-bottom: 2px;
     }

     .price-tag {
         font-size: 12px;
     }

     .score-label {
         font-size: 10px;
     }

     .score-num {
         font-size: 12px;
         padding: 3px 6px;
     }

     .map-panel {
         position: absolute;
         inset: 0;
         opacity: 0;
         pointer-events: none;
         transition: opacity .25s;
         z-index: 1;
     }

     .map-panel.visible {
         opacity: 1;
         pointer-events: all;
     }

     .map-canvas {
         height: 100%;
     }

     .map-search-bar {
         width: min(240px, 65%);
         font-size: 12px;
         padding: 7px 12px;
         top: 10px;
     }

     .mobile-tabs {
         display: flex;
     }

     .filter-drawer {
         top: auto;
         right: 0;
         left: 0;
         bottom: 0;
         width: 100%;
         max-width: 100%;
         height: 88vh;
         border-radius: 20px 20px 0 0;
         transform: translateY(100%);
         box-shadow: 0 -8px 40px rgba(0, 0, 0, .15);
     }

     .filter-drawer.open {
         transform: translateY(0);
     }

     .drawer-header {
         position: relative;
         padding-top: 26px;
     }

     .drawer-header::before {
         content: '';
         position: absolute;
         top: 10px;
         left: 50%;
         transform: translateX(-50%);
         width: 36px;
         height: 4px;
         background: #ddd;
         border-radius: 4px;
     }

     .amenity-grid {
         grid-template-columns: 1fr 1fr;
     }

     .score-btns {
         flex-wrap: wrap;
     }

     .result-card {
         border-radius: 16px 16px 0 0;
         padding: 14px 16px 18px;
     }
 }

 @media (max-width: 480px) {
     .hotel-card {
         height: 106px;
     }

     .card-carousel {
         width: 100px;
         min-width: 100px;
     }

     .card-title {
         font-size: 15px;
     }

     .filter-bar span {
         display: none;
     }
 }

 @media (min-width: 769px) and (max-width: 1024px) {
     .search-layout {
         grid-template-columns: 260px 1fr;
     }

     .card-carousel {
         height: 158px;
     }

     .card-title {
         font-size: 18px;
     }
 }

 @media (min-width: 1280px) {
     .search-layout {
         grid-template-columns: 340px 1fr;
     }
 }